<template>
  <!-- 
    菜单导航：
        - el-menu
            - 最大的父级容器，导航体
        - el-submenu
            - 含有子菜单的导航项目
            - 使用<template v-slot:title></template>来定义标题
            - 插槽区域内可以书写：
                - icon
                - 标题名
        - el-menu-item-group
            - 用于将最终菜单项进行分组
            - 使用<template v-slot:title></template>来定义标题
        - el-menu-item
            - 最终菜单项
            - 推荐统一按照el-submenu的标题设置方案，即：使用<template v-slot:title></template>来定义标题
    -->
  <!-- <el-menu background-color="#304156" text-color="#fff" :router="true">
    <el-menu-item index="/">
      <template v-slot:title>
        <i class="sell-shouye"></i>
        <span>后台首页</span>
      </template>
    </el-menu-item>

    <el-menu-item index="/order">
      <template #title>
        <i class="sell-dingdan"></i>
        <span>订单管理</span>
      </template>
    </el-menu-item>

    <el-submenu index="/goods">
      <template #title>
        <i class="sell-shangpin"></i>
        <span>商品管理</span>
      </template>

      <el-menu-item index="/goods/goods-list">
        <template #title>
          <span>商品列表</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/goods/goods-add">
        <template #title>
          <span>商品添加</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/goods/goods-category">
        <template #title>
          <span>商品分类</span>
        </template>
      </el-menu-item>
    </el-submenu>

    <el-menu-item index="/store">
      <template #title>
        <i class="sell-dianpu"></i>
        <span>店铺管理</span>
      </template>
    </el-menu-item>

    <el-submenu index="/account">
      <template #title>
        <i class="sell-zhanghao"></i>
        <span>账号管理</span>
      </template>

      <el-menu-item index="/account/account-list">
        <template>
          <span>账号列表</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/account/account-add">
        <template>
          <span>添加账号</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/account/account-update">
        <template>
          <span>修改密码</span>
        </template>
      </el-menu-item>
    </el-submenu>

    <el-submenu index="/statistics">
      <template #title>
        <i class="sell-tongji"></i>
        <span>销售统计</span>
      </template>

      <el-menu-item index="/statistics/goods-statistics">
        <template #title>
          <span>商品统计</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/statistics/order-statistics">
        <template #title>
          <span>订单统计</span>
        </template>
      </el-menu-item>
    </el-submenu>
  </el-menu> -->

  <el-menu background-color="#304156" text-color="#fff" :router="true">
    <template v-for="(item,index) in routes">
      <el-menu-item :key="index" v-if="item.meta && !item.meta.hasChild" :index="item.path">
        <template #title>
        <i :class="item.meta.iconfont"></i>
          <span>{{item.meta.title}}</span>
        </template>
      </el-menu-item>

      <el-submenu v-else-if="item.meta && item.meta.hasChild" :key="index" :index="item.path">
        <template #title>
        <i :class="item.meta.iconfont"></i>
          <span>{{item.meta.title}}</span>
        </template>

        <el-menu-item v-for="(_item,_index) in item.children" :key="_index" :index="`${item.path}/${_item.path}`">
          <template #title>
            <span>{{_item.meta.title}}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </template>
    
  </el-menu>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import storage from "@/utils/storage";

export default {
  computed: {
    ...mapState("permission", ["routes"])
  },
  methods: {
    ...mapMutations("permission", ["filter_routes",'updata_matcher'])
  },
  mounted() {
    let role = storage.roles;
    // 原地刷新
    if (role) this.filter_routes(role);

   this.updata_matcher()
  }
};
</script>

<style scoped>
.el-menu {
  border-right: none;
}
</style>